<template>
  <div>
    <el-dialog :model-value="centeVisible" title="Warning" width="30%" center>
      <el-select
        v-model="roleIds"
        multiple
        placeholder="请选择"
        style="width: 240px"
      >
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancels">Cancel</el-button>
          <el-button type="primary" @click="confirms"> Confirm </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import * as http from "@/request/http";
import { ref, watch } from "vue";

const roleIds = ref<number[]>([]);
let options: any = [];
// 请求用户
http.role.roleListAll().then((res) => {
  console.log(res);
  options = res.data;
});
const props = withDefaults(
  defineProps<{
    centeVisible: boolean;
    bjId: number;
  }>(),
  {
    centeVisible: false,
    bjId: 0,
  }
);

watch(
  () => props.bjId,
  () => {
    if (props.bjId != 0) {
      console.log(12312312);

      http.admin.getAdminbjId(props.bjId).then((res) => {
        if (res.code == 200) {
          console.log(res);
          roleIds.value = res.data.map((item) => item.id);
        }
      });
    }
  }
);

const emit = defineEmits<{
  (event: "cancels"): void;
  (event: "confirms"): void;
}>();

// 取消
function cancels() {
  emit("cancels");
}
//
function confirms() {
  emit("confirms");
}
</script>

<style scoped></style>
